<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane :label="$t('common.basic_info')" class="form-tabs-tab-pane">
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 单行文本 -->
                <el-form-item :label="$t('form.text')" prop="text">
                  <el-input v-model="form.text" :placeholder="$t('form.text_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 多行文本 -->
                <el-form-item :label="$t('form.textarea')" prop="desc">
                  <el-input v-model="form.desc" type="textarea" :placeholder="$t('form.textarea_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 下拉选项 -->
                <el-form-item :label="$t('form.select')" prop="select">
                  <el-select v-model="form.select" :placeholder="$t('form.select_tips')">
                    <el-option label="地区1" value="shanghai" />
                    <el-option label="地区2" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 时间选项 -->
                <el-form-item :label="$t('form.date_select')" prop="date_select">
                  <el-date-picker
                    v-model="form.date_select"
                    type="datetime"
                    :placeholder="$t('form.date_select_tips')"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 日期范围 -->
                <el-form-item :label="$t('form.daterange')" prop="daterange">
                  <el-date-picker
                    v-model="form.daterange"
                    type="daterange"
                    range-separator="至"
                    :start-placeholder="$t('common.start_date')"
                    :end-placeholder="$t('common.end_date')"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 开关 -->
                <el-form-item :label="$t('form.switch')" prop="switch">
                  <el-switch v-model="form.switch" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 复选框 -->
                <el-form-item :label="$t('form.checkbox')" prop="checkbox">
                  <el-checkbox-group v-model="form.checkbox">
                    <el-checkbox label="线上活动" name="checkbox" />
                    <el-checkbox label="促销活动" name="checkbox" />
                    <el-checkbox label="线下活动" name="checkbox" />
                    <el-checkbox label="品牌曝光" name="checkbox" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 单选框 -->
                <el-form-item :label="$t('form.radio')" prop="radio">
                  <el-radio-group v-model="form.radio">
                    <el-radio label="赞助商" />
                    <el-radio label="场馆" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 标签 -->
                <el-form-item :label="$t('form.dynamicTags')" prop="dynamicTags">
                  <jsp-tags
                    :data="form.dynamicTags"
                    :limit="20"
                    @change=" (tags) => form.dynamicTags = tags "
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 带拖拽排序的缩略图组件 -->
                <el-form-item :label="$t('common.thumbnail')" prop="cover_image">
                  <jsp-image-upload
                    :default-list="thumbnailList"
                    action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                    :limit="2"
                    :size="2"
                    :multiple="false"
                    accept=".jpg,.png,.gif"
                    @success="handleImageUploadSuccss"
                    @error="handleImageUploadError"
                    @dragStart="handleDragImageStart"
                    @dragEnd="handleDragImageEnd"
                    @remove="handleImageDelete"
                    @change="handleImageUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 文件上传 -->
                <el-form-item :label="$t('common.uploadFile')" prop="file_ids">
                  <jsp-file-upload
                    :default-list="fileList"
                    action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                    :limit="5"
                    :size="2"
                    :multiple="false"
                    accept=".doc,.xls,.zip,.rar"
                    @success="handleFileUploadSuccss"
                    @error="handleFileUploadError"
                    @remove="handleFileDelete"
                    @change="handleFileUploadChange"
                    @preview="handleFileUploadPreview"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- ck富文本编辑器 -->
                <el-form-item :label="$t('form.editor')" prop="editorData">
                  <jsp-ckeditor id="ckeditor" v-model="form.editorData" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 分类树 -->
                <el-form-item :label="$t('form.tree')" prop="defaultCheckedkeys">
                  <el-scrollbar>
                    <el-tree
                      ref="tree"
                      :check-strictly="false"
                      :data="treeDemoData"
                      :props="{ children: 'children', label: 'label' }"
                      show-checkbox
                      node-key="id"
                      class="permission-tree"
                      :default-checked-keys="form.defaultCheckedkeys"
                    />
                  </el-scrollbar>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 弹框树 -->
                <el-form-item :label="$t('form.modalTree')" prop="modal_tree_defualt_id">
                  <jsp-categorytree-picker
                    type="radio"
                    node-key="id"
                    :tree-data="modalTreeData"
                    :placeholder="$t('common.pleaseSelect')"
                    :dialog-tips="$t('common.pleaseSelect')"
                    :expand-all="false"
                    :default-checked-keys="[form.modal_tree_defualt_id]"
                    :default-checked-labels="form.modal_tree_defualt_name"
                    height="300px"
                    @change="(e) => (form.modal_tree_defualt_id = e.checkedKeys)"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 级联选择器 -->
                <el-form-item :label="$t('form.cascader')" prop="cascaderValue">
                  <el-cascader
                    v-model="form.cascaderValue"
                    :options="cascaderOptions"
                    :props="{ expandTrigger: 'hover' }"
                    :clearable="true"
                    :filterable="true"
                    :debounce="300"
                    @change="handleCascaderChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 图标选择器 -->
                <el-form-item :label="$t('form.icon')" prop="icon">
                  <jsp-icon-picker v-model="form.icon" :placeholder="$t('form.icon_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 复合型填写框 -->
                <el-form-item :label="$t('form.complexInput')" prop="complexInputValue">
                  <el-input
                    v-model="form.complexInputValue"
                    :placeholder="$t('form.complexInput_tips')"
                    class="input-with-select"
                  >
                    <el-select
                      slot="prepend"
                      v-model="form.complexSelectValue"
                      :placeholder="$t('common.pleaseSelect')"
                      style="width: 110px"
                    >
                      <el-option label="餐厅名" value="1" />
                      <el-option label="订单号" value="2" />
                      <el-option label="用户电话" value="3" />
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 复制内容 -->
                <el-form-item :label="$t('form.copyInput')" prop="url">
                  <el-input v-model="form.url" :placeholder="$t('form.copyInput_tips')">
                    <el-button
                      slot="append"
                      icon="awesome-icon far fa-copy"
                      title="复制"
                      @click="handleClipboard(form.url, $event)"
                    />
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 计数器1 -->
                <el-form-item :label="$t('form.input_number')" prop="input_number">
                  <el-input-number v-model="form.input_number" :min="1" :max="10" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <!-- 计数器2 -->
                <el-form-item :label="$t('form.input_number')" prop="input_number1">
                  <el-input-number v-model="form.input_number1" :min="1" :max="10" controls-position="right" />
                </el-form-item>
              </el-col>
            </el-row>

          </el-tab-pane>
          <el-tab-pane :label="$t('form.goods_info')" class="form-tabs-tab-pane" />
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{ $t('common.create') }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspCkeditor from '@/components/JspCkeditor'
import JspIconPicker from '@/components/JspIconPicker'
import JspImageUpload from '@/components/JspImageUpload'
import clipboard from '@/utils/clipboard'
import JspFileUpload from '@/components/JspFileUpload'
import JspTags from '@/components/JspTags'
import JspCategorytreePicker from '@/components/JspCategorytreePicker'

// export
export default {
  name: 'ExampleForm',
  components: {
    JspCkeditor,
    JspIconPicker,
    JspImageUpload,
    JspFileUpload,
    JspTags,
    JspCategorytreePicker
  },
  data() {
    return {
      form: {
        text: '',
        select: '',
        date_select: '',
        daterange: '',
        switch: false,
        checkbox: [],
        radio: '',
        desc: '',
        dynamicTags: ['标签一', '标签二', '标签三'],
        // 图片id集
        cover_image: '2,3',
        // 附件id集
        file_ids: '1,11',
        // 编辑器内容
        editorData: '',
        // 级联选择器初始值,如 [省id,市id，县id]
        cascaderValue: ['0', '0', '0'],
        // 图标
        icon: '',
        // 复合型
        complexInputValue: '',
        complexSelectValue: '',
        url: 'http://www.jishupu.com',
        defaultCheckedkeys: [1],
        // 弹框分类树
        modal_tree_defualt_id: 1,
        modal_tree_defualt_name: '一级1',
        // 计数器
        input_number: 0,
        input_number1: 0
      },
      // 默认图片列表
      thumbnailList: [
        {
          id: 2,
          name: 'food.jpeg',
          url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
          path: '/uploads/101.jpg'
        },
        {
          id: 3,
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          path: '/uploads/100.jpg'
        }
      ],
      // 附件列表
      fileList: [
        {
          id: 1,
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          path: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          id: 11,
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          path: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      // 表单填写校验 ，通过prop="name"属性进行控制
      rules: {
        text: [
          { required: true, message: '请填写单行文本', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        daterange: [
          {
            required: true,
            type: 'array',
            message: '请选择日期范围',
            trigger: 'blur',
            fields: {
              0: {
                type: 'date',
                required: true,
                message: '请选择日期范围开始日期'
              },
              1: {
                type: 'date',
                required: true,
                message: '请选择日期范围结束日期'
              }
            }
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          }
        ],
        date3: [
          {
            type: 'date',
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          }
        ],
        cover_image: [{ required: true, message: '请上传缩略图' }]
      },
      // 标签填写参数
      tagInputVisible: false,
      tagInputValue: '',
      // 权限菜单路由数据模拟
      treeDemoData: [
        {
          id: 1,
          parent_id: 0,
          label: '一级 1',
          children: [
            {
              id: 4,
              parent_id: 1,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  parent_id: 4,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  parent_id: 4,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          label: '一级 2',
          children: [
            {
              id: 5,
              parent_id: 2,
              label: '二级 2-1'
            },
            {
              id: 6,
              parent_id: 2,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          parent_id: 0,
          children: [
            {
              id: 7,
              parent_id: 3,
              label: '二级 3-1'
            },
            {
              id: 8,
              parent_id: 3,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 级联选择器数据
      cascaderOptions: [
        {
          value: '0',
          label: '全部',
          children: [
            {
              value: '0',
              label: '全部',
              children: [
                {
                  value: '0',
                  label: '全部'
                }
              ]
            }
          ]
        },
        {
          value: '1',
          label: '北京市',
          children: [
            {
              value: '0',
              label: '全部'
            },
            {
              value: '1',
              label: '北京市',
              children: [
                {
                  value: '0',
                  label: '全部'
                },
                {
                  value: '11',
                  label: '朝阳区'
                },
                {
                  value: '12',
                  label: '顺义区'
                }
              ]
            }
          ]
        }
      ],
      // 弹框选择
      modalTreeData: [
        {
          id: 1,
          parent_id: 0,
          label: '一级 1',
          children: [
            {
              id: 4,
              parent_id: 1,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  parent_id: 4,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  parent_id: 4,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          label: '一级 2',
          children: [
            {
              id: 5,
              parent_id: 2,
              label: '二级 2-1'
            },
            {
              id: 6,
              parent_id: 2,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          parent_id: 0,
          children: [
            {
              id: 7,
              parent_id: 3,
              label: '二级 3-1'
            },
            {
              id: 8,
              parent_id: 3,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      // 路由参数
      const { id } = this.routerParams
      this.form.id = id
      if (id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页
        // await coding...
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
      // 清空分类树数据默认数据
      this.form.defaultCheckedkeys = []
      this.$refs.tree.setCheckedKeys([])
    },
    /** *********************************************** 表单相关 结束 ******************************************************/

    /** *********************************************** 附件上传 开始 ******************************************************/
    // 上传成功
    handleFileUploadSuccss(response, file, fileList) {
      console.log('上传成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    // 上传失败
    handleFileUploadError(err, file, fileList) {
      console.log('上传失败事件', err, file, fileList)
      this.$message.error('上传失败')
    },
    // 删除
    handleFileDelete(file, fileList) {
      console.log('删除文件事件', file, fileList)
      this.$message.success('删除成功')
    },
    // 上传成功、删除图片时激活
    handleFileUploadChange(result) {
      console.log('改变事件', result)
      this.file_ids = this.ids
    },
    // 预览或下载
    handleFileUploadPreview(file) {
      console.log(file)
    },
    /** *********************************************** 附件上传 结束 ******************************************************/

    /** ******************************************* 缩略图上传拖拽组 开始 **************************************************/
    // 上传成功
    handleImageUploadSuccss(response, file, fileList) {
      console.log('上传成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    // 上传失败
    handleImageUploadError(err, file, fileList) {
      console.log('上传失败事件', err, file, fileList)
      this.$message.error('上传失败')
    },
    // 图片拖拽开始
    handleDragImageStart(e, fileList) {
      console.log('开始拖拽事件', e, fileList)
    },
    // 图片拖拽结束
    handleDragImageEnd(e, fileList) {
      console.log('拖拽结束事件', e, fileList)
    },
    // 删除图片
    handleImageDelete(file, fileList) {
      console.log('删除图片事件', file, fileList)
      this.$message.success('删除成功')
    },
    // 上传成功、上传失败、拖拽结束时返回当前的图片数组、图片id集
    handleImageUploadChange(result) {
      console.log('改变事件', result)
      this.cover_image = this.ids
    },
    /** ******************************************* 缩略图上传拖拽组 结束 **************************************************/

    /** ******************************************* 级联选择器 开始 **************************************************/
    handleCascaderChange(value) {
      console.log(value)
    },
    /** ******************************************* 级联选择器 结束 **************************************************/
    // 复制
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>

<style scoped lang="scss">
</style>

